<template>
  <div>
    <div class="demo-inner-divider">基本</div>
    <div class="collapse">
      <div>
        <p>基本</p>
        <e-collapse :value="value2">
          <e-panel name="1">
            华为
            <template #content>成立于1987年，总部位于广东省深圳市龙岗区。</template>
          </e-panel>
          <e-panel name="2">
            苹果
            <template #content>美国一家高科技公司。由史蒂夫·乔布斯、斯蒂夫·盖瑞·沃兹尼亚克和罗纳德·杰拉尔德·韦恩（Ron Wayne）等人于1976年4月1日创立，并命名为美国苹果电脑公司（Apple Computer Inc.），2007年1月9日更名为苹果公司，总部位于加利福尼亚州的库比蒂诺。</template>
          </e-panel>
          <e-panel name="3">
            三星
            <template #content>韩国最大的电子工业企业，同时也是三星集团旗下最大的子公司。1938年3月三星电子于韩国大邱成立，创始人是李秉喆。</template>
          </e-panel>
        </e-collapse>
      </div>
    </div>
    <div class="demo-inner-divider">嵌套</div>
    <div class="collapse">
      <div>
        <p>嵌套</p>
        <e-collapse :value="value2">
          <e-panel name="1">
            华为
            <template #content>
              <span>成立于1987年，总部位于广东省深圳市龙岗区。</span>
              <e-collapse :value="value2">
                <e-panel name="1">
                  荣耀
                  <template #content>
                    <span>于2013年诞生。2020年11月17日，华为投资控股有限公司决定整体出售原属华为旗下品牌荣耀HONOR的全部业务资产，收购方为深圳市智信新信息技术有限公司。</span>
                  </template>
                </e-panel>
                <e-panel name="2">
                  海思
                  <template #content>
                    <span>海思半导体是一家半导体公司，海思半导体有限公司成立于2004年10月，前身是创建于1991年的华为集成电路设计中心。海思公司总部位于深圳，在北京、上海、美国硅谷和瑞典设有设计分部。</span>
                  </template>
                </e-panel>
              </e-collapse>
            </template>
          </e-panel>
          <e-panel name="2">
            苹果
            <template #content>美国一家高科技公司。由史蒂夫·乔布斯、斯蒂夫·盖瑞·沃兹尼亚克和罗纳德·杰拉尔德·韦恩（Ron Wayne）等人于1976年4月1日创立，并命名为美国苹果电脑公司（Apple Computer Inc.），2007年1月9日更名为苹果公司，总部位于加利福尼亚州的库比蒂诺。</template>
          </e-panel>
          <e-panel name="3">
            三星
            <template #content>韩国最大的电子工业企业，同时也是三星集团旗下最大的子公司。1938年3月三星电子于韩国大邱成立，创始人是李秉喆。</template>
          </e-panel>
        </e-collapse>
      </div>
    </div>
    <div class="demo-inner-divider">手风琴</div>
    <div class="collapse">
      <div>
        <p>手风琴</p>
        <e-collapse
          :value="value2"
          :accordion="true"
        >
          <e-panel name="1">
            华为
            <template #content>成立于1987年，总部位于广东省深圳市龙岗区。</template>
          </e-panel>
          <e-panel name="2">
            苹果
            <template #content>美国一家高科技公司。由史蒂夫·乔布斯、斯蒂夫·盖瑞·沃兹尼亚克和罗纳德·杰拉尔德·韦恩（Ron Wayne）等人于1976年4月1日创立，并命名为美国苹果电脑公司（Apple Computer Inc.），2007年1月9日更名为苹果公司，总部位于加利福尼亚州的库比蒂诺。</template>
          </e-panel>
          <e-panel name="3">
            三星
            <template #content>韩国最大的电子工业企业，同时也是三星集团旗下最大的子公司。1938年3月三星电子于韩国大邱成立，创始人是李秉喆。</template>
          </e-panel>
        </e-collapse>
      </div>
    </div>
    <div class="demo-inner-divider">简洁模式</div>
    <div class="collapse">
      <div>
        <p>简洁模式</p>
        <e-collapse
          :value="value2"
          simple
        >
          <e-panel name="1">
            华为
            <template #content>成立于1987年，总部位于广东省深圳市龙岗区。</template>
          </e-panel>
          <e-panel name="2">
            苹果
            <template #content>美国一家高科技公司。由史蒂夫·乔布斯、斯蒂夫·盖瑞·沃兹尼亚克和罗纳德·杰拉尔德·韦恩（Ron Wayne）等人于1976年4月1日创立，并命名为美国苹果电脑公司（Apple Computer Inc.），2007年1月9日更名为苹果公司，总部位于加利福尼亚州的库比蒂诺。</template>
          </e-panel>
          <e-panel name="3">
            三星
            <template #content>韩国最大的电子工业企业，同时也是三星集团旗下最大的子公司。1938年3月三星电子于韩国大邱成立，创始人是李秉喆。</template>
          </e-panel>
        </e-collapse>
      </div>
    </div>
    <collapse-md class="markdown-body"></collapse-md>
  </div>
</template>

<script>
import collapseMd from '../../docs/collapse.md';

export default {
  name: 'DemoCollapse',
  components: {
    collapseMd
  },
  data() {
    return {
      value: '2',
      value2: '2',
    };
  },
}
</script>

<style scoped>
.collapse{
  display: flex;
  flex-direction: row;
  margin-bottom: 60px;
}
.collapse > div{
  margin-right: 50px ;
  width: 100%;
}
.collapse p {
  font-size: 14px;
  color:rgba(98,54,255,1);
  margin-bottom: 10px;
}
</style>
